import { DownOutlined, UpOutlined } from '@ant-design/icons-vue';
import { Button, Col, Form, FormItem, Row, Space } from 'ant-design-vue';
import { defineComponent, reactive, ref } from 'vue';
import CreateComponent from '../create-component';
import type { ColumnType } from '../pro-table/typing';
import { useResize } from '../utils/useResize';
import './style.css';

interface AnyObject {
  [key: string]: any;
}
export default defineComponent({
  props: {
    columns: {
      type: Array<ColumnType>,
    },
  },
  emits: ['submit', 'reset'],
  setup(props, { emit }) {
    const { columns } = props;
    const containerRef = ref(null);
    const formRef = ref();
    const formData = reactive<AnyObject>({});
    const _columns = ref<ColumnType[]>();
    _columns.value = columns?.map(eachColumn => {
      eachColumn.isShow = true;
      return eachColumn;
    });

    const colSpan = ref(6);
    const expand = ref(false);

    const onExpandChange = () => {
      expand.value = !expand.value;
      displayFilterItem();
    };

    const submit = () => {
      emit('submit', formData);
    };

    const onReset = () => {
      formRef.value.resetFields();
      emit('reset');
    };

    const displayFilterItem = () => {
      if (!expand.value) {
        let hiddenStartIndex = 1;
        const displayNum = 24 / colSpan.value;
        if (displayNum > 2) {
          hiddenStartIndex = displayNum - 1;
        }
        _columns.value?.forEach((eachColumn, index) => {
          if (index > hiddenStartIndex) {
            eachColumn.isShow = false;
          } else {
            eachColumn.isShow = true;
          }
        });
      } else {
        if (_columns) {
          _columns.value?.forEach(eachColumn => {
            eachColumn.isShow = true;
          });
        }
      }
    };

    useResize(containerRef, ({ width }) => {
      if (width < 513) {
        colSpan.value = 24;
      } else if (width >= 513 && width < 785) {
        colSpan.value = 12;
      } else if (width >= 785 && width < 1057) {
        colSpan.value = 8;
      } else if (width >= 1057) {
        colSpan.value = 6;
      }
      displayFilterItem();
    });

    return () => {
      return (
        <div class="query-filter" ref={containerRef}>
          <Form class="query-filter-form" ref={formRef} layout="horizontal" model={formData}>
            <Row class="query-filter-row" gutter={16}>
              {_columns.value?.map(eachColumn => {
                if (!eachColumn.hideInSearch && eachColumn.valueType) {
                  const dataIndex: string = (eachColumn.dataIndex || '') as string;
                  if (dataIndex === '') {
                    console.error(
                      'query-filter: An error occurred while creating formItem. dataIndex is empty!',
                    );
                  }
                  return (
                    <Col v-show={eachColumn.isShow} span={colSpan.value}>
                      <FormItem label={eachColumn.title} name={dataIndex}>
                        <CreateComponent column={eachColumn} v-model:value={formData[dataIndex]} />
                      </FormItem>
                    </Col>
                  );
                }
              })}
              {
                <Col>
                  <Space class="query-buttons">
                    <Button onClick={() => onReset()}>重置</Button>
                    <Button type="primary" onClick={submit}>
                      查询
                    </Button>
                    <a class="expand" onClick={() => onExpandChange()}>
                      {expand.value ? ' 收起' : ' 展开'}
                      {expand.value ? <UpOutlined /> : <DownOutlined />}
                    </a>
                  </Space>
                </Col>
              }
            </Row>
          </Form>
        </div>
      );
    };
  },
});
